<template>
  <div class="user">
    <div class="tips" v-if="EntInfo.isSign != 1">
      <span>在发布供需之前，请签署信用承诺函以保障大家的权益。</span>
      <a-button type="primary" class="gobtn" @click="toSign">
        <em>去签署</em>
      </a-button>
    </div>

    <div class="handing">
      <h2>进行中的事务</h2>
      <div class="handbox clearfix">
        <div
          class="hand-Main f-left clearfix"
          @click="JumpUrl('/usercenter/MyNeed')"
        >
          <div class="f-left hand-icon">
            <icon-font class="anticonSvg" type="icon-xuqiu" />
          </div>
          <div class="f-right hand-text">
            <span>需求</span><br />
            <span class="hand-totle"
              ><em>{{ HomeTjData.demandCount }}</em
              >（条）</span
            >
          </div>
        </div>
        <div
          class="hand-Main f-left clearfix"
          @click="JumpUrl('/usercenter/MyProduct')"
        >
          <div class="f-left hand-icon">
            <icon-font class="anticonSvg" type="icon-gongxu" />
          </div>
          <div class="f-right hand-text">
            <span>产品</span><br />
            <span class="hand-totle"
              ><em>{{ HomeTjData.productInfoCount }}</em
              >（条）</span
            >
          </div>
        </div>
        <div
          class="hand-Main f-left clearfix"
          @click="JumpUrl('/usercenter/MyProgramme')"
        >
          <div class="f-left hand-icon">
            <icon-font class="anticonSvg" type="icon-zu2256" />
          </div>
          <div class="f-right hand-text">
            <span>解决方案</span><br />
            <span class="hand-totle"
              ><em>{{ HomeTjData.solutionInfoCount }}</em
              >（条）</span
            >
          </div>
        </div>
        <div
          class="hand-Main f-left clearfix"
          @click="JumpUrl('/usercenter/MyConcerns')"
        >
          <div class="f-left hand-icon">
            <icon-font class="anticonSvg" type="icon-guanzhuon" />
          </div>
          <div class="f-right hand-text">
            <span>互相关注</span><br />
            <span class="hand-totle"
              ><em>{{ HomeTjData.userAttentionCount }}</em
              >（条）</span
            >
          </div>
        </div>
        <div
          class="hand-Main f-left clearfix"
          @click="JumpUrl('/usercenter/MyMessage?type=true')"
        >
          <div class="f-left hand-icon">
            <icon-font class="anticonSvg" type="icon-xiazai16" />
          </div>
          <div class="f-right hand-text">
            <span>他人留言</span><br />
            <span class="hand-totle"
              ><em>{{ HomeTjData.userMessageCount }}</em
              >（条）</span
            >
          </div>
        </div>
        <div
          class="hand-Main f-left clearfix"
          @click="JumpUrl('/usercenter/system')"
        >
          <div class="f-left hand-icon">
            <icon-font class="anticonSvg" type="icon-tongzhi" />
          </div>
          <div class="f-right hand-text">
            <span>系统消息</span><br />
            <span class="hand-totle"
              ><em>{{ HomeTjData.userSystemMessageCount }}</em
              >（条）</span
            >
          </div>
        </div>
      </div>
    </div>

    <div class="mt-10 need-box">
      <div class="clearfix need-top">
        <h2 class="f-left">产品留言</h2>
        <icon-font
          class="f-right more-icon"
          type="icon-gengduojiantou"
          @click="JumpUrlMyMessage"
        />
        <a-button
          class="f-right mr-20 btn-color"
          @click="JumpAdd('/usercenter/ProductsRelease')"
        >
          <!-- <router-link to="ProductsRelease"> -->
          发布产品
          <!-- </router-link> -->
        </a-button>
      </div>
      <a-table
        :scroll="{ x: 1500 }"
        :columns="Producecolumns"
        :data-source="ProduceList"
        :pagination="GYpagination"
        :rowKey="(record) => record.id"
      >
        <div
          slot="readStatus"
          slot-scope="text"
          style="color: #e9284f"
          v-if="text == 0"
        >
          未读
        </div>
        <div
          slot="readStatus"
          slot-scope="text"
          style="color: #0da9b0"
          v-else-if="text == 1"
        >
          已读
        </div>
        <template slot="handle" slot-scope="text, recode">
          <a @click="showInformation(recode)">详情</a>
          <a-divider type="vertical" />
          <a @click="operation(recode)">编辑</a>
        </template>
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="action" slot-scope="text, record">
          <a @click="seeResponse(record, true)">查看留言</a>
        </span>
      </a-table>
    </div>

    <div class="mt-10 need-box">
      <div class="clearfix need-top">
        <h2 class="f-left">需求留言</h2>
        <icon-font
          class="f-right more-icon"
          type="icon-gengduojiantou"
          @click="JumpUrlMyMessage"
        />
        <a-button
          class="f-right mr-20 btn-color"
          @click="JumpAdd('/usercenter/RequirementRelease')"
        >
          <!-- <router-link to="RequirementRelease"> -->
          发布需求
          <!-- </router-link> -->
        </a-button>
      </div>
      <a-table
        :scroll="{ x: 1500 }"
        :columns="columns"
        :data-source="materialsDemand"
        :pagination="pagination"
        :rowKey="(record) => record.id"
      >
        <div
          slot="readStatus"
          slot-scope="text"
          style="color: #e9284f"
          v-if="text == 0"
        >
          未读
        </div>
        <div
          slot="readStatus"
          slot-scope="text"
          style="color: #0da9b0"
          v-else-if="text == 1"
        >
          已读
        </div>
        <template slot="handle" slot-scope="text, recode">
          <a @click="showInformation(recode)">详情</a>
          <a-divider type="vertical" />
          <a @click="operation(recode)">编辑</a>
        </template>
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="action" slot-scope="text, record">
          <a @click="seeResponse(record, false)">查看留言</a>
        </span>
      </a-table>
    </div>
    <div class="mt-10 need-box">
      <div class="clearfix need-top">
        <h2 class="f-left">解决方案留言</h2>
        <icon-font
          class="f-right more-icon"
          type="icon-gengduojiantou"
          @click="JumpUrlMyMessage"
        />
        <a-button
          class="f-right mr-20 btn-color"
          @click="JumpAdd('/usercenter/Addprogramme')"
        >
          <!-- <router-link to="RequirementRelease"> -->
          发布解决方案
          <!-- </router-link> -->
        </a-button>
      </div>
      <a-table
        :scroll="{ x: 1500 }"
        :columns="fangancolumns"
        :data-source="fagnanmaterialsDemand"
        :pagination="fanganpagination"
        :rowKey="(record) => record.id"
      >
        <div
          slot="readStatus"
          slot-scope="text"
          style="color: #e9284f"
          v-if="text == 0"
        >
          未读
        </div>
        <div
          slot="readStatus"
          slot-scope="text"
          style="color: #0da9b0"
          v-else-if="text == 1"
        >
          已读
        </div>
        <template slot="handle" slot-scope="text, recode">
          <a @click="showInformation(recode)">详情</a>
          <a-divider type="vertical" />
          <a @click="operation(recode)">编辑</a>
        </template>
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="action" slot-scope="text, record">
          <a @click="seeResponse(record, false, true)">查看留言</a>
        </span>
      </a-table>
    </div>
    <!-- 他人的留言模态框 -->
    <a-modal v-model="visible" title="留言内容" :width="800">
      <template v-if="!showStatus && !fanganshowStatus">
        <ul class="messageCompany">
          <li>企业名称：{{ detailForm.supplyEntName }}</li>
          <li>企业地址：{{ detailForm.supplyAddress }}</li>
          <li>
            企业网址：<a target="_blank" :href="detailForm.supplyUrl">{{
              detailForm.supplyUrl
            }}</a>
          </li>
          <li>联系人：{{ detailForm.supplyContact }}</li>
          <li>手机号码：{{ detailForm.supplyPhone }}</li>
          <li>电子邮箱：{{ detailForm.supplyEmail }}</li>
          <li>
            已发布产品：<a href="">
              <br /><a
                href="javascript:void(0);"
                @click="seeProduct(item.split(':')[0])"
                v-for="(item, index) in productList"
                :key="index"
                >{{ item.split(":")[1] }}<br /></a
            ></a>
          </li>
        </ul>
        <div class="messagetxt">附言：{{ detailForm.postscript }}</div>
      </template>
      <template v-if="showStatus && !fanganshowStatus">
        <ul class="messageCompany">
          <li>企业名称：{{ detailForm.demandEntName }}</li>
          <li>企业地址：{{ detailForm.demandAddress }}</li>
          <li>
            企业网址：<a target="_blank" :href="detailForm.demandUrl">{{
              detailForm.demandUrl
            }}</a>
          </li>
          <li>联系人：{{ detailForm.demandContact }}</li>
          <li>手机号码：{{ detailForm.demandPhone }}</li>
          <li>电子邮箱：{{ detailForm.demandEmail }}</li>
        </ul>
        <div class="messagetxt">附言：{{ detailForm.postscript }}</div>
      </template>
      <template v-if="!showStatus && fanganshowStatus">
        <ul class="messageCompany">
          <li>企业名称：{{ detailForm.entName }}</li>
          <li>企业地址：{{ detailForm.entAddress }}</li>
          <!-- <li>
            企业网址：<a target="_blank" :href="detailForm.demandUrl">{{
              detailForm.demandUrl
            }}</a>
          </li> -->
          <li>联系人：{{ detailForm.contact }}</li>
          <li>手机号码：{{ detailForm.phone }}</li>
          <li>电子邮箱：{{ detailForm.email }}</li>
        </ul>
        <div class="messagetxt">附言：{{ detailForm.postscript }}</div>
      </template>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="close"> 关闭 </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { Icon } from "ant-design-vue";
import { getToken, setIsSign, getCookiesUserInfo } from "@/utils/auth";
import {
  getMaterialsDemandPageList,
  getProductInfoPageList,
  updateMessage,
} from "@/apis/user/MyMessage";
import { listSysMsg } from "@/apis/system/msg";
import { getMyUserMessageSolutionInfoList } from "@/apis/user/MyMessage";
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
// import { GetSearchPageList } from "@/apis/user/MaterialsDemand";
import {
  // GetproductList,
  userHomeTj,
  GetproductDetail,
} from "@/apis/user/ProductInfo";
import { isLogin } from "@/utils";

// import { message, Modal } from "ant-design-vue";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2056587_887xlc4g80d.js",
});
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "需求名称",
    dataIndex: "demandProductName",
    key: "demandProductName",
    ellipsis: true,
    width: 400,
  },
  {
    title: "需求编号",
    dataIndex: "demandNo",
    // align: "center",
    width: 200,
  },
  {
    title: "供应企业",
    dataIndex: "supplyEntName",
    width: 200,
    // align:"center",
  },
  {
    title: "留言状态",
    dataIndex: "readStatus",
    // align: "center",
    width: 200,

    scopedSlots: { customRender: "readStatus" },
    // customRender: function (text) {
    //   if (text == 0) {
    //     return "未读";
    //   } else if (text == 1) {
    //     return "已读";
    //   }
    // },
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    // align: "center",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "action",
    // align: "center",
    fixed: "right",
    width: 120,
    scopedSlots: { customRender: "action" },
  },
];
const fangancolumns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "解决方案名称",
    dataIndex: "solutionName",
    key: "solutionName",
    ellipsis: true,
    width: 400,
  },
  {
    title: "需解决方案编号",
    dataIndex: "solutionNo",
    // align: "center",
    width: 200,
  },
  {
    title: "供应企业",
    dataIndex: "entName",
    width: 200,
    // align:"center",
  },
  {
    title: "留言状态",
    dataIndex: "readStatus",
    // align: "center",
    width: 200,

    scopedSlots: { customRender: "readStatus" },
    // customRender: function (text) {
    //   if (text == 0) {
    //     return "未读";
    //   } else if (text == 1) {
    //     return "已读";
    //   }
    // },
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    // align: "center",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "action",
    // align: "center",
    fixed: "right",
    width: 120,
    scopedSlots: { customRender: "action" },
  },
];
const Producecolumns = [
  {
    title: "序号",
    dataIndex: "index",
    width: 80,
    align: "center",
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "产品名称",
    dataIndex: "productName",
    key: "productName",
    ellipsis: true,
    width: 400,
  },
  {
    title: "产品编号",
    dataIndex: "productNo",
    ellipsis: true,
    // align: "center",
    width: 200,
  },
  {
    title: "采购企业",
    ellipsis: true,
    dataIndex: "demandEntName",
    width: 200,
    // align:"center",
  },
  {
    title: "留言状态",
    dataIndex: "readStatus",
    // align: "center",
    scopedSlots: { customRender: "readStatus" },
    // ellipsis: true,
    width: 200,
    // customRender: function (text) {
    //   if (text == 0) {
    //     return "未读";
    //   } else if (text == 1) {
    //     return "已读";
    //   }
    // },
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    ellipsis: true,
    // align: "center",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    ellipsis: true,
    fixed: "right",
    width: 120,
    scopedSlots: { customRender: "action" },
  },
];
export default {
  data() {
    return {
      fanganshowStatus: false,
      productList: [],
      messageVisible: false,
      showMessageStatus: false,
      // messageVisible: false,
      MessageForm: {}, //我的留言查看留言
      visible: false,
      detailForm: {}, //他人的留言查看详情
      showStatus: false, //模态框采购企业是否显示
      showFOllow: true,
      EntInfo: {},
      HomeTjData: {},
      materialsDemand: [],
      fagnanmaterialsDemand: [],
      ProduceList: [],
      columns,
      fangancolumns,
      Producecolumns,
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeXQ(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeXQ(page, pageSize),
      },
      fanganpagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeFA(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeFA(page, pageSize),
      },
      GYpagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeGY(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeGY(page, pageSize),
      },
    };
  },
  created() {
    this.getMaterialsDemandPageList();
    this.getProductInfoPageList();
    this.userHomeTj();
    this.getEntBaseInfo();
    this.getMyUserMessageSolutionInfoList();
  },
  methods: {
    JumpUrl(url) {
      this.$router.push(url);
    },
    seeProduct(id) {
      let param = {
        id: id,
      };
      GetproductDetail(param).then((res) => {
        var record = res.data;
        if (record.delStatus == 1) {
          this.$message.warning("该产品不存在");
          return;
        }
        if (record.auditStatus != 2 || record.productStatus == 2) {
          this.$message.warning("该产品已下架");
          return;
        }
        let routeData = this.$router.resolve({
          path: "/ProductContent",
          query: { id },
        });
        window.open(routeData.href, "_blank");
      });
    },
    // 他人的留言模态框
    close() {
      for (let item in this.detailForm) {
        this.detailForm[item] = "";
      }
      this.visible = false;
    },
    getMyUserMessageSolutionInfoList() {
      let _params = {
        current: this.fanganpagination.current,
        size: this.fanganpagination.pageSize,
        solutionStatus: 0,
        type: 2,
      };
      getMyUserMessageSolutionInfoList(_params)
        .then((res) => {
          if (res.code == 200) {
            this.fagnanmaterialsDemand = res.data.records;
            this.fanganpagination.total = res.data.total;
          }
        })
        .catch((error) => {});
    },
    // 他人的留言-需求响应/供应采购=>详情查看
    seeResponse(record, showStatus, fanganshowStatus) {
      this.detailForm = { ...record };
      this.showStatus = showStatus;
      this.fanganshowStatus = fanganshowStatus;
      let _params = {
        id: record.id,
      };
      updateMessage(_params)
        .then((res) => {
          this.getMaterialsDemandPageList();
          this.getProductInfoPageList();
          this.getMyUserMessageSolutionInfoList();
        })
        .catch((error) => {});
      this.visible = true;
      if (this.detailForm.productId != null) {
        var list = this.detailForm.productId.split(",");
        this.productList = list;
      }
    },
    async JumpAdd(url) {
      if (!isLogin(true)) return;
      if (this.EntInfo.isSign == 1) {
        this.$router.push(url);
      } else {
        this.$store.commit("setIsSign", true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作");
      }
    },
    JumpUrlMyMessage() {
      this.$router.push("/usercenter/MyMessage?type=true");
    },
    // 去签署前需要登录
    toSign() {
       let that = this;
       isLogin().then(()=>{
        that.$router.push({ path: "/usercenter/sign" });
      })
    },
    // 获取企业基本信息
    getEntBaseInfo() {
      getEntBaseInfo()
        .then((res) => {
          if (res.code == 200) {
            this.EntInfo = res.data;
            localStorage.setItem("IsSign", res.data.isSign);
          }
        })
        .catch((error) => {});
    },
    // 获取首页统计
    userHomeTj() {
      userHomeTj()
        .then((res) => {
          console.log("首页统计");
          console.log(res);
          if (res.code == 200) {
            this.HomeTjData = res.data;
          }
        })
        .catch((err0r) => {});
      // 获取消息数量
      let param = {
        pageSize: 1000,
        PageNum: 1,
        userId: JSON.parse(getCookiesUserInfo()).userId,
      };
      listSysMsg(param)
        .then((res) => {
          if (res.code == 200) {
            this.HomeTjData.userSystemMessageCount = res.total;
          }
        })
        .catch((err0r) => {});
    },
    // 获取需求列表
    getMaterialsDemandPageList() {
      let _params = {
        size: this.pagination.pageSize,
        current: this.pagination.current,
      };
      getMaterialsDemandPageList(_params)
        .then((res) => {
          console.log("物资");
          console.log(res);
          if (res.code == 200) {
            this.materialsDemand = res.data.records;
            this.pagination.total = res.data.total;
          }
        })
        .catch((error) => {});
    },
    onPageChangeXQ(page, pageSize) {
      this.pagination.current = page;
      this.getMaterialsDemandPageList();
    },
    onSizeChangeXQ(current, pageSize) {
      this.pagination.pageSize = pageSize;
      this.getMaterialsDemandPageList();
    },

    onPageChangeFA(page, pageSize) {
      this.fagnanpagination.current = page;
      this.getMyUserMessageSolutionInfoList();
    },
    onSizeChangeFA(current, pageSize) {
      this.fagnanpagination.pageSize = pageSize;
      this.getMyUserMessageSolutionInfoList();
    },
    // 获取供应产品列表
    getProductInfoPageList() {
      let _params = {
        size: this.GYpagination.pageSize,
        current: this.GYpagination.current,
      };
      getProductInfoPageList(_params)
        .then((res) => {
          console.log("供应");
          console.log(res);
          if (res.code == 200) {
            this.ProduceList = res.data.records;
          }
        })
        .catch((error) => {});
    },

    onPageChangeGY(page, pageSize) {
      this.GYpagination.current = page;
      this.getProductInfoPageList();
    },
    onSizeChangeGY(current, pageSize) {
      this.GYpagination.pageSize = pageSize;
      this.getProductInfoPageList();
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    seeMaterialDetailsEdit(id) {
      console.log(id);
      this.$router.push("/MaterialDetails?id=" + id);
    },

    seeProductContentDetails(id) {
      console.log(id);
      this.$router.push("/ProductContent?id=" + id);
    },
  },
  components: {
    IconFont,
  },
};
</script>

<style lang="less" scoped>
.user {
  .tips {
    height: 57px;
    line-height: 57px;
    padding-left: 34px;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px dashed #92a7d6;
    font-size: 18px;
    color: #188af1;
    .gobtn {
      width: 110px;
      height: 32px;
      background-color: #188af1;
      border-radius: 16px;
    }
  }

  .handing {
    margin-top: 16px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 20px 24px;
    .handbox {
      // display: flex;
      // justify-content: space-around;
      // align-items: center;
      .hand-Main {
        margin: 23px 30px;

        .hand-icon {
          width: 64px;
          height: 64px;
          background-color: #0860b6;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 16px;

          .anticonSvg {
            font-size: 32px;
            color: #fff;
          }
        }
        &:nth-child(2n) .hand-icon {
          background-color: #00b7c2;
        }

        .hand-text {
          cursor: pointer;
          &:nth-child(1) {
            font-size: 16px;
            color: #303133;
          }
          .hand-totle {
            font-size: 14px;
            color: #909399;
            em {
              font-size: 36px;
              color: #303133;
            }
          }
        }
      }
    }
  }

  .need-box {
    background-color: #fff;
    padding: 19px 24px;
    border-radius: 4px;

    .need-top {
      margin-bottom: 14px;
      h2 {
        font-size: 22px;
        color: #303133;
      }

      .more-icon {
        margin-top: 5px;
        font-size: 24px;
        color: #c0c4cc;
      }

      .btn-color {
        font-size: 14px;
        color: #188af1;
        border-color: #188af1;
      }
    }

    span {
      a {
        font-size: 14px;
        color: #188af1;
      }
    }
  }
}

.messageCompany {
  padding: 20px;
  border-radius: 4px;
  background: #f5f7fa;
  overflow: hidden;
  li {
    line-height: 24px;
    width: 100%;
    float: left;
    a {
      color: #188af1;
    }
    &:first-child {
      width: 100%;
      color: #303133;
    }
    &:nth-child(2) {
      width: 100%;
      border-bottom: 1px dashed #dcdfe6;
      margin-bottom: 10px;
      height: auto;
      padding-bottom: 10px;
    }
    &:nth-child(7) {
      width: 100%;
    }
  }
}
.messagetxt {
  padding: 20px;
  font-size: 18px;
}
</style>
